<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>鼠标右击事件</title>
    <style>
        body, html {
            height: 100%;
            width: 100%;
        }

        #menu {
            height: 150px;
            width: 100px;
            position: fixed; /*固定浏览器定位*/
            display: none;
        }

        #first {
            position: relative;
            height: 30px;
            border:1px solid;
        }

        #second {
            position: relative;
            height: 30px;
            border:1px solid;
        }

        #third {
            position: relative;
            height: 30px;
            border:1px solid;
        }

        #forth {
            position: relative;
            height: 30px;
            border:1px solid;
        }

        #fifth {
            position: relative;
            height: 30px;
            border:1px solid;
        }


        #first:hover{
            background: palevioletred;
        }
        #second:hover{
            background: peachpuff;
        }
        #third:hover{
            background: yellowgreen;
        }
        #forth:hover{
            background: gold;
        }
        #fifth:hover{
            background: darkgray;
        }

    </style>
</head>
<body>
<div id="menu">
    <div id="first">第一层菜单</div>
    <div id="second">第二层菜单</div>
    <div id="third">第三层菜单</div>
    <div id="forth">第四层菜单</div>
    <div id="fifth">第五层菜单</div>
</div>
<script>
    var menu = document.querySelector("#menu");
    document.body.oncontextmenu = function (e) {
        e.stopPropagation();//取消冒泡
        e.preventDefault();//取消浏览器默认行为
        menu.style.left = e.clientX + "px";
        menu.style.top = e.clientY + "px";

        menu.style.display="block";
        //clientX:344;
        //clientY:135;
    }
    document.body.onclick=function (){
        menu.style.display="none";
    }
</script>
</body>
</html>